<template>
  <div id="box">
    <div class="small">
      <div class="small-top">
        <input type="text" placeholder="请输入商家名称" v-model="shopName">
        <input type="text" placeholder="请输入联系人" v-model="contacts">
        <input type="text" placeholder="请输入手机号" v-model="tel">
        <el-button :icon="Search" @click="searchmanage" style="width: 32px; height: 57%; background-color: #5981E1; color: #fff; font-size: 20px; border:none; border-radius: 7px;" />
      </div>
      <div class="small-bottom">
        <el-table :data="manage" style="width: 100%">
          <el-table-column prop="shopName" label="商家名称" width="168" />
          <el-table-column prop="contacts" label="联系人" width="168" />
          <el-table-column prop="tel" label="手机号" width="168" />
          <el-table-column prop="businessName" width="168">
            <template #header>
              <select class="sel" name="主营业务" id="vip" v-model="selectedBusiness" @change="businessSearch">
                <option value="">主营业务</option>
                <option value="1">手机业务</option>
                <option value="2">美妆业务</option>
                <option value="3">餐饮业务</option>
                <option value="4">娱乐项目</option>
                <option value="5">话费服务</option>
                <option value="6">维修服务</option>
                <option value="7">婴儿用品</option>
                <option value="8">个护化妆</option>
              </select>
            </template>
          </el-table-column>
          <el-table-column prop="platName" label="支付信息" width="168" />
          <el-table-column prop="address" label="商家地址" width="168" />
          <el-table-column label="操作" width="180">
            <template #default="scoped">
              <button class="btn1" value="1" @click="btn1(scoped.row,$event)">通过</button>
              <button class="btn2" @click="failing(scoped.row,$event)" value="0">不通过</button>
              <button class="btn3" @click="deletebusiness(scoped.row)">删除</button>
            </template>
          </el-table-column>
        </el-table>
        <div class="foot">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-count="total"
            @current-change="pageChange" />
        </div>
        <!-- 删除模态框 -->
        <el-dialog v-model="delmask" title="删除" width="500" style="font-weight: 600;" center 
        :show-close="false">
          <span class="spn1">
            您确定删除此条信息吗？
          </span>
          <template #footer>
            <div class="dialog-footer">
              <el-button class="btns" @click="save">保 存</el-button>
              <el-button class="btnss" @click="cancel">
                取 消
              </el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 不通过模态框 -->
        <el-dialog class="mask1" v-model="failmask" title="不通过" width="500" style="font-weight: 600;" center 
        :show-close="false">
          <input v-model="inps" class="inp1" placeholder="在此输入不通过的理由">
          <template #footer>
            <div class="dialog-footer1">
              <el-button class="btns1" @click="savemask">保 存</el-button>
              <el-button class="btnss1" @click="canceles">
                取 消
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { ElMessage } from "element-plus";

// 分页
let pageSize = 8;
let currentPage = ref(1);
let total = ref(1);
const pageChange = (newPage) => {
  currentPage.value = newPage;
  management();
};
onMounted(() => {
  management();
});

// 调接口
var manage = ref([]);
var management = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/shopList", {
    pageIndex: currentPage.value,
    pageSize: pageSize
  }).then((res) => {
    console.log(res);
    manage.value = res.data.data.shopList;
    total.value = res.data.data.pageCount;
  });
};

// 搜索变量
const shopName = ref('');
const contacts = ref('');
const tel = ref('');
var searchmanage = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/shopListSearch", {
    pageIndex: currentPage.value,
    pageSize: pageSize,
    shopName: shopName.value,
    contacts: contacts.value,
    tel: tel.value
  }).then((res) => {
    manage.value = res.data.data.shopList;
    total.value = res.data.data.pageCount;
  });
};

// 主营业务选择变量
var selectedBusiness = ref('');
var businessSearch = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/businessSearch", {
    pageIndex: 1,
    pageSize: 7,
    businessId: selectedBusiness.value
  }).then((res) => {
    console.log(res);
    manage.value = res.data.data.shopList;
    total.value = res.data.data.pageCount;
  });
};

// 删除接口
var delmask = ref(false);
var deletingRow = null;
var deletebusiness = function (row) {
  delmask.value = true;
  deletingRow = row;
}
var cancel = function () {
  delmask.value = false;
}
var save = function (row) {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  const updatedRow = {...row, deflag: 1 };
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/deleteShop", {
    shopId: deletingRow.shopId,
    deflag: updatedRow.deflag
  }).then((res) => {
    console.log(res);
    management();
    cancel();
  });
};


// 通过接口
var passsuccess = ref('');
var passfailing = ref('');
var parent = ref('')
var btn1 = function (row, event) {
  console.log(event.target);
  passsuccess.value = event.target;
  passfailing.value = event.target.nextSibling;
  parent.value = event.target.parentNode;
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/status", {
    exNumber: "1",
    shopId: row.shopId,
    tel: row.tel,
    email: "1667225057@qq.com"
  }).then((res) => {
    console.log(res);
    ElMessage({
      message: '已通过',
      type: 'success',
    })
    passsuccess.value.style.color = "#ccc";
    passfailing.value.style.display = "none";
    parent.value.style.justifyContent = "center";
  })
}

// 不通过接口
var pass = ref('');
var passfail = ref('');
var parents = ref('');
var failmask = ref(false);
var failingRow = null;
var inps = ref('');
var failing = function (row, event) {
  failmask.value = true;
  failingRow = row;
  pass.value = event.target;
  passfail.value = event.target.previousSibling;
  parents.value = event.target.parentNode;
  
};
var savemask = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/shop/status", {
    exNumber: "0",
    shopId: failingRow.shopId,
    tel: failingRow.tel,
    cause: inps.value, // 将 inps 的值赋给 cause
    email: "1667225057@qq.com"
  }).then((res) => {
    console.log(res);
    failmask.value = false;
    ElMessage({
      message: '不通过',
      type: 'error',
    })
    pass.value.style.color = "#ccc";
    passfail.value.style.display = "none";
    parents.value.style.justifyContent = "center";
  });
}
var canceles = function () {
  failmask.value = false;
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#box {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}

.small {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 15px;
}

.small-top {
  width: 100%;
  height: 10%;
  box-sizing: border-box;
  line-height: 50px;
}

input {
  width: 16%;
  height: 57%;
  margin-right: 10px;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  box-shadow: 0px 3px 5px 0px #E7E7E7;
  box-sizing: border-box;
  padding-left: 15px;
  outline: none;
}

.small-bottom {
  width: 100%;
  height: 95%;
  background-color: #fff;
  margin-top: 15px;
}

.el-table--fit {
  width: 100%;
  height: 100%;
}

.el-table {
  --el-table-border-color: none;
  --el-table-border: 0px solid var(--el-table-border-color);
}

:deep(.cell) {
  line-height: 36px;
  text-align: center;
  color: #000;
  border: none;
}

.foot {
  width: 77%;
  height: 10%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 41px;
}

.el-pagination {
  justify-content: center;
}

.sel {
  border: none;
  outline: none;
  font-weight: 600;
}

.btn1 {
  width: 20%;
  height: 6%;
  font-size: 13px;
  border: none;
  margin-right: 7px;
  background-color: transparent;
  color: #3AE000;
}

.btn2 {
  width: 27%;
  height: 6%;
  font-size: 13px;
  border: none;
  margin-right: 7px;
  background-color: transparent;
  color: #E00026;
}

.btn3 {
  width: 18%;
  height: 6%;
  font-size: 13px;
  border: none;
  margin-right: 7px;
  background-color: transparent;
  color: #E00026;
}

:deep(.el-dialog) {
  --el-dialog-margin-top: 17%;
  --el-dialog-border-radius: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 25%;
  height: 30%;
}

.spn1 {
  display: inline-block;
  width: 100%;
  margin-top: 20%;
  font-weight: 500;
}

:deep(.el-dialog__footer) {
  width: 100%;
  height: 60%;
}

.dialog-footer {
  width: 100%;
  height: 60%;
  margin-top: 10%;
  display: flex;
  justify-content: space-evenly;
}

.btns {
  width: 25%;
  height: 60%;
  text-align: center;
  line-height: 10px;
  background-color: #5981E1;
  color: #fff;
}

.btnss {
  width: 25%;
  height: 60%;
  text-align: center;
  line-height: 10px;
  background-color: #BFBFBF;
  color: #fff;
}

:deep(.mask1) {
  width: 25%;
  height: 30%;
  --el-dialog-margin-top: 17%;
  --el-dialog-border-radius: none;
}

.inp1 {
  width: 300px;
  height: 50px;
  margin-left: 10px;
  margin-top: 20px;
  padding-left: 20px;
  border: none;
  background-color: #D5D5D5;
  box-shadow: none;
  border-radius: 2px;
}

.dialog-footer1 {
  width: 100%;
  height: 60%;
  margin-top: 5%;
  display: flex;
  justify-content: space-evenly;
}

.btns1 {
  width: 25%;
  height: 100%;
  text-align: center;
  line-height: 10px;
  background-color: #5981E1;
  color: #fff;
}

.btnss1 {
  width: 25%;
  height: 100%;
  text-align: center;
  line-height: 10px;
  background-color: #BFBFBF;
  color: #fff;
}

.inp1::-webkit-input-placeholder {
  color: #2E2E2E;
  font-weight: 600;
  font-size: 17px;
}

input {
  outline: none;
}
</style>